<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/detail/detail.css">
    <link rel="stylesheet" href="../../js/swiper/swiper.min.css">
    <title>商品详情</title>
    <style>
        .shop-detail-carsouel{
            overflow: hidden;
        }
        .details-figure-p {
            width: 94%;
            margin: 0 auto;
            font-size: 0.14rem;
            color: #000000;
            font-size: 0.16rem;
        }

        .details-figure-p>* {
            color: #000000;
            font-size: 0.16rem;
        }

        .details-figure-p a {
            color: #000000;
        }
        .swiper-container{
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="shop-detail">
            <!-- 详情页star -->
            <div class="head">
                <div class="h-left" @click="tyitu"></div>
                <div class="h-middle">商品详情</div>
                <div class="h-right"></div>
            </div>
            <!-- 详情页end -->
            <!-- 轮播star -->
            <div class="shop-detail-carsouel">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img class="goodsImgs" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 轮播end -->
            <!-- 内容区域star -->
            <!-- 价格展示-->
            <div class="shop-detail-price">
                <span class="shop-new-price">￥</span>
                <span class="shop-original-price">￥</span>
            </div>
			<!-- 商品标题 -->
			<div class="shop-commodity-title">
			    <p class="commodity"></p>
			</div>
            <!-- 隔断处 -->
            <p class="shop-detail-filter-p"></p>
            <!-- 送至star -->
            <!--<div class="shop-detail-delivery">-->
            <!--<div class="delivery-left">-->
            <!--<span class="delivery-sapn">送至</span>-->
            <!--</div>-->
            <!--<div class="delivery-middle">-->
            <!--<img src="../../img/shopDetail/delivery.png" alt="">-->
            <!--<div class="shop-detail-address">-->
            <!--&lt;!&ndash;<p class="address-p">河北省 石家庄市 市庄路与泰华街交叉口 东南150米</p>&ndash;&gt;-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="delivery-right">-->
            <!--<span class="delivery-right-more">···</span>-->
            <!--</div>-->
            <!--</div>-->
            <!-- 隔断处 -->
            <!--<p class="shop-detail-filter-p"></p>-->
            <!-- 推荐 -->
            <!--<div class="shop-detail-recommend">-->
            <!--<div class="recommend-top">-->
            <!--<div class="recommend-left">-->
            <!--<img src="../../img/shopcarImg1.png" alt="">-->
            <!--</div>-->
            <!--<div class="recommend-right">-->
            <!--<ul class="recommend-right-ul">-->
            <!--&lt;!&ndash;<li class="recommend-title">东吴丽人（桥西店）</li>&ndash;&gt;-->
            <!--<li class="recommend-evalute"></li>-->
            <!--</ul>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="recommend-bottom">-->
            <!--<p class="recommend-products-title">为你推荐</p>-->
            <!--<div class="recommend-products">-->
            <!--<ul class="recommend-products-ul">-->
            <!--<li>-->
            <!--<img src="../../img/shopcarImg1.png" alt="">-->
            <!--<br>-->
            <!--<p>京选尚品</p>-->
            <!--<span>￥999</span>-->
            <!--</li>-->
            <!--<li>-->
            <!--<img src="../../img/shopcarImg1.png" alt="">-->
            <!--<br>-->
            <!--<p>京选尚品</p>-->
            <!--<span>￥990</span>-->
            <!--</li>-->
            <!--<li>-->
            <!--<img src="../../img/shopcarImg1.png" alt="">-->
            <!--<br>-->
            <!--<p>京选尚品</p>-->
            <!--<span>￥546</span>-->
            <!--</li>-->
            <!--<li>-->
            <!--<img src="../../img/shopcarImg1.png" alt="">-->
            <!--<br>-->
            <!--<p>京选尚品</p>-->
            <!--<span>￥6576</span>-->
            <!--</li>-->
            <!--</ul>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!-- 隔断处 -->
            <!--<p class="shop-detail-filter-p"></p>-->
            <!-- 详情图 -->
            <div class="shop-details-figure">
                <div class="details-figure-title" style="overflow: hidden;">
                    <span class="details-figure-span">商品详情</span>
                </div>
                <div class="details-figure-img" style="padding-bottom: 0.2rem;">
                    <p class="details-figure-p"></p>
                </div>
            </div>
        </div>
        <div class="detail-footer">
            <div class="footer-left">
                <ul class="shop-detail-store">
                    <li class="lingshou">
                        <a href="" class="shop_detail">
                            <img src="../../img/shopDetail/store.png" alt="">
                            <br>
                            <span>店铺</span>
                        </a>
                    </li>
                    <li>
                        <a href="../shopcar/indexShop.html">
                            <img src="../../img/shopDetail/shopcar.png" alt="">
                            <br>
                            <span >购物车</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-right">
                <a class="shop-detail-shopcar" id="addCar" href="javascript:0;" @click="shop">加入购物车</a>
            </div>
        </div>
    </div>
    <script src="../../js/jquery-2.2.3.min.js"></script>
    <script src="../../js/rem.js"></script>
    <script src="../../js/common.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-resource.min.js"></script>
</body>

</html>
<!--<script src="js/cc.js"></script>-->
<script src="../../js/swiper/swiper.min.js"></script>
<script src="layer-v3.1.1/layer/layer.js"></script>
<script>
    $(function () {
		$('.shop_detail').hide();
        //获取商品ID
        var goodsId = decodeURIComponent(getQueryString("id"));
        var goodsType = decodeURIComponent(getQueryString("goodsType"));
        console.log(goodsType);
        var theRequest = GetRequest();
        var url = SURL + '/jfd/retailGoods/goodsDetails';
        // $.ajax({
        //     url:url,
        //     type:'POST',
        //     data:{
        //         goodsId:goodsId
        //     },
        //     success:function (res) {
        //         console.log(res);
        //     }
        // })
        // $.post(url,{goodsId:goodsId},function(e){
        //     console.log(e)
        //     if(e.code===0){
        //         var data=e.data;
        //         $('.shop-new-price').html('￥'+data.shopPrice);
        //         $('.shop-original-price').html('￥'+data.marketPrice);
        //         $('.commodity').html(data.goodsName);
        //         $('.details-figure-img').html(data.goodsDetails);
        //         var carsouel='';
        //         if(data.gallery){
        //             var gallery=data.gallery.split(',');
        //             $.each(gallery,function(i,val){
        //                 if($.trim(val).length>0){
        //                     carsouel+='<div class="swiper-slide"><img src="'+val+'" alt="" style="height: 3.72rem;"></div>';
        //                 }
        //             })
        //         }
        //
        //
        //         $('.swiper-wrapper').html(carsouel);
        //     }
        // })
        var swiper = new Swiper('.swiper-container');



        // $('#addCar').onclick(function(){
        //     var url= SURL +'/jfd/cart/addCarts';
        //     var userId=localStorage.getItem('userId');
        //     console.log(userId)
        //     /*$.post(url,{userId:userId,goodsId:goodsId,goodsNum:1,goodsType:''},function(e){
        //
        //     })*/
        // })
        var app = new Vue({
            el: '#app',
            data: {},
            mounted() {
                if(theRequest.hasOwnProperty('id')) {
                    var goodsId = theRequest.id
                }else{
                    var goodsId = goodsId;
                }
                this.$http.post(SURL + '/api/xlscommodity/getCommodityDeatil', {
                    id: goodsId
                }, {
                    emulateJSON: true
                }).then(function (e) {
                    console.log(e)
                    if (e.body.status === 1) {
                        var data = e.body.data;
                        $('.details-figure-p').children().css({
                            'color': '#000000',
                            'fontSize': '0.16rem'
                        })
                        if(data.orderStatus!=3){
                            $('.shop_detail').hide();
                        }
                        $('.shop-new-price').html('￥' + data.shopPrice);
                        $('.shop-original-price').html('￥' + data.commodity_market_price);
                        $('.commodity').html(data.goodsName);
                        $('.goodsImgs').attr('src',ImageUrl + data.goodsImg);
                        $('.details-figure-img').children('.details-figure-p').html(data.commodity_details);
                    }
                })
            },
            methods: {
                shop() {
                    if(theRequest.hasOwnProperty('goodsType')){
                        var goodsType = theRequest.goodsType
                    }else{
                        var goodsType = 1
                    }
                    this.$http.post(SURL + '/api/xlscart/addCarts', {
                        userId: localStorage.getItem('userId'),
                        goodsId: goodsId,
                        cartNum: 1
                    }, {
                        emulateJSON: true
                    }).then(function (res) {
                        console.log()
                        if (res.body.status == 1) {
                            location.href = '../shopcar/indexShop.html'
                        }else{
                            alert(res.body.msg);
                        }
                    })
                },
                tyitu() {
                    window.history.go(-1)
                }
            }
        })
    })

    function GetRequest() {
        //获取url中"?"符后的字串 
        var url = location.search;
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
</script>
